<template>
  <el-container>
  <el-header class="text-left">{{lang._505}}</el-header>
  <el-main>
      <el-tree class="data-tree" :data="data5" node-key="id" default-expand-all :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button class="first-btn btn" type="primary" size="mini" round>
                {{lang._504}}
              </el-button>
            </span>
          </span>
        </el-tree>
  </el-main>
</el-container>
</template>
<style scoped>
  .el-header, .el-footer {
    background-color: #FFF;
    color: #a2aebb;
    text-indent: 20px;
    font-size: 18px;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: unset;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
<style>
.el-tree-node__content{
    height: 50px;
}
</style>

<style lang="less" scoped>
.data-tree {
      color: #409EFF;
      .first-btn {
        margin-left: 350px;
      }
      
      
    }
</style>

<script>
export default {
    props: ['lang'],
    data() {
      const data = [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }];
      return {
        
        data5: JSON.parse(JSON.stringify(data)),
        // 树形结构图的数据
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
}
</script>
